<template>
	<view class="container backup-container">
		<view class="header">
			<text class="title">数据备份</text>
			<text class="subtitle">安全备份您的密码数据</text>
		</view>
		
		<!-- 数据库状态组件 -->
		<password-storage ref="storage" @storage-ready="onStorageReady" @storage-error="onStorageError" />
		<!-- 离线模式提示 -->
		<view v-if="isOffline" class="offline-notice">
			<text class="notice-icon">📱</text>
			<text class="notice-text">当前为离线模式，仅支持本地备份</text>
		</view>
		<!-- 云备份状态 -->
		<view class="cloud-section" v-if="!isOffline"> 
			<view class="section-title">云备份</view>
			<view class="cloud-status">
				<view v-if="!isCloudLoggedIn" class="cloud-login">
					<text class="cloud-icon">☁️</text>
					<view class="cloud-info">
						<text class="cloud-title">未登录云账号</text>
						<text class="cloud-desc">登录后可自动同步数据</text>
					</view>
					<button class="login-btn" @click="showCloudLogin">登录</button>
				</view>
				<view v-else class="cloud-sync">
					<text class="cloud-icon">☁️</text>
					<view class="cloud-info">
						<text class="cloud-title">{{ cloudUserInfo.username }}</text>
						<text class="cloud-desc">最后同步: {{ lastSyncTime || '从未同步' }}</text>
					</view>
					<view class="sync-actions">
						<button class="sync-btn" @click="syncToCloud" :disabled="isSyncing">
							{{ isSyncing ? '同步中...' : '同步' }}
						</button>
						<button class="logout-btn" @click="logoutCloud">退出</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 备份选项 -->
		<view class="backup-section">
			<view class="section-title">本地备份</view>
			<view class="backup-options">
				<view class="option-card" @click="exportToFile">
					<text class="option-icon">📁</text>
					<text class="option-title">导出到文件</text>
					<text class="option-desc">保存为本地文件</text>
				</view>
				<view class="option-card" @click="exportToEmail">
					<text class="option-icon">📧</text>
					<text class="option-title">发送到邮箱</text>
					<text class="option-desc">通过邮件发送备份</text>
				</view>
				<view class="option-card" @click="exportToClipboard">
					<text class="option-icon">📋</text>
					<text class="option-title">复制到剪贴板</text>
					<text class="option-desc">快速复制数据</text>
				</view>
			</view>
		</view>
		
		<!-- 导入选项 -->
		<view class="import-section">
			<view class="section-title">导入数据</view>
			<view class="import-options">
				<view class="option-card" @click="importFromFile">
					<text class="option-icon">📂</text>
					<text class="option-title">从文件导入</text>
					<text class="option-desc">选择备份文件导入</text>
				</view>
				<view class="option-card" @click="importFromClipboard">
					<text class="option-icon">📋</text>
					<text class="option-title">从剪贴板导入</text>
					<text class="option-desc">粘贴备份数据</text>
				</view>
				<view v-if="isCloudLoggedIn" class="option-card" @click="importFromCloud">
					<text class="option-icon">☁️</text>
					<text class="option-title">从云端导入</text>
					<text class="option-desc">从云备份恢复数据</text>
				</view>
			</view>
		</view>
		
		<!-- 数据统计 -->
		<view class="stats-section">
			<view class="section-title">数据统计</view>
			<view class="stats-card">
				<view class="stat-item">
					<text class="stat-label">总密码数</text>
					<text class="stat-value">{{ passwordCount }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">最后备份</text>
					<text class="stat-value">{{ lastBackupTime || '从未备份' }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">加密状态</text>
					<text class="stat-value">{{ isEncrypted ? '已加密' : '未加密' }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">云同步状态</text>
					<text class="stat-value">{{ isCloudLoggedIn ? '已连接' : '未连接' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 安全提示 -->
		<view class="security-tips">
			<view class="section-title">安全提示</view>
			<view class="tips-list">
				<view class="tip-item">
					<text class="tip-icon">🔒</text>
					<text class="tip-text">备份文件包含敏感信息，请妥善保管</text>
				</view>
				<view class="tip-item">
					<text class="tip-icon">☁️</text>
					<text class="tip-text">云备份数据经过加密，确保安全性</text>
				</view>
				<view class="tip-item">
					<text class="tip-icon">🔄</text>
					<text class="tip-text">定期备份数据，防止数据丢失</text>
				</view>
			</view>
		</view>
		
		<!-- 云登录弹窗 -->
		<view v-if="showLoginModal" class="modal-overlay" @click="closeLoginModal">
			<view class="modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">云账号登录</text>
					<text class="modal-close" @click="closeLoginModal">×</text>
				</view>
				<view class="modal-body">
					<view class="form-item">
						<text class="form-label">用户名/邮箱</text>
						<input 
							class="form-input" 
							v-model="loginForm.username" 
							placeholder="请输入用户名或邮箱"
						/>
					</view>
					<view class="form-item">
						<text class="form-label">密码</text>
						<input 
							class="form-input" 
							v-model="loginForm.password" 
							type="password"
							placeholder="请输入密码"
						/>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn-cancel" @click="closeLoginModal">取消</button>
					<button class="btn-login" @click="loginCloud">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import PasswordStorage from '@/components/PasswordStorage.vue'

export default {
	components: {
		PasswordStorage
	},
	data() {
		return {
			passwordCount: 0,
			lastBackupTime: '',
			isEncrypted: false,
			passwords: [],
			// 云备份相关
			isCloudLoggedIn: false,
			cloudUserInfo: {},
			lastSyncTime: '',
			isSyncing: false,
			showLoginModal: false,
			loginForm: {
				username: '',
				password: ''
			},
			isOffline: false
		}
	},
	onLaunch() {
		//this.checkNetwork()
		/* uni.onNetworkStatusChange((res) => {
			this.globalData.isOffline = !res.isConnected
		}) */
	},
	onShow() {
		// 检查离线状态
		this.isOffline = uni.getStorageSync('setting_isOffline')||false;
	},
	mounted() {
		this.loadBackupInfo()
		this.checkCloudLoginStatus()
	},
	methods: {
		// 检查云登录状态
		checkCloudLoginStatus() {
			const cloudToken = uni.getStorageSync('cloud_token')
			const cloudUserInfo = uni.getStorageSync('cloud_user_info')
			const lastSyncTime = uni.getStorageSync('last_sync_time')
			
			if (cloudToken && cloudUserInfo) {
				this.isCloudLoggedIn = true
				this.cloudUserInfo = cloudUserInfo
				this.lastSyncTime = lastSyncTime
			}
		},
		
		// 显示云登录弹窗
		showCloudLogin() {
			this.showLoginModal = true
		},
		
		// 关闭登录弹窗
		closeLoginModal() {
			this.showLoginModal = false
			this.loginForm = { username: '', password: '' }
		},
		
		// 云账号登录
		async loginCloud() {
			if (!this.loginForm.username || !this.loginForm.password) {
				uni.showToast({ title: '请填写完整信息', icon: 'none' })
				return
			}
			
			try {
				uni.showLoading({ title: '登录中...' })
				
				// 模拟云登录API调用
				const loginResult = await this.cloudLoginAPI(this.loginForm)
				
				if (loginResult.success) {
					// 保存登录信息
					uni.setStorageSync('cloud_token', loginResult.token)
					uni.setStorageSync('cloud_user_info', loginResult.userInfo)
					
					this.isCloudLoggedIn = true
					this.cloudUserInfo = loginResult.userInfo
					
					uni.hideLoading()
					uni.showToast({ title: '登录成功', icon: 'success' })
					this.closeLoginModal()
					
					// 自动同步数据
					setTimeout(() => {
						this.syncToCloud()
					}, 1000)
				} else {
					uni.hideLoading()
					uni.showToast({ title: loginResult.message || '登录失败', icon: 'none' })
				}
			} catch (error) {
				uni.hideLoading()
				console.error('云登录失败:', error)
				uni.showToast({ title: '登录失败', icon: 'none' })
			}
		},
		
		// 模拟云登录API
		cloudLoginAPI(loginData) {
			return new Promise((resolve) => {
				setTimeout(() => {
					// 模拟登录验证
					if (loginData.username && loginData.password) {
						resolve({
							success: true,
							token: 'cloud_token_' + Date.now(),
							userInfo: {
								username: loginData.username,
								email: loginData.username + '@example.com'
							}
						})
					} else {
						resolve({
							success: false,
							message: '用户名或密码错误'
						})
					}
				}, 1000)
			})
		},
		
		// 退出云账号
		logoutCloud() {
			uni.showModal({
				title: '确认退出',
				content: '确定要退出云账号吗？',
				success: (res) => {
					if (res.confirm) {
						uni.removeStorageSync('cloud_token')
						uni.removeStorageSync('cloud_user_info')
						uni.removeStorageSync('last_sync_time')
						
						this.isCloudLoggedIn = false
						this.cloudUserInfo = {}
						this.lastSyncTime = ''
						
						uni.showToast({ title: '已退出', icon: 'success' })
					}
				}
			})
		},
		
		// 同步到云端
		async syncToCloud() {
			if (!this.isCloudLoggedIn) {
				uni.showToast({ title: '请先登录云账号', icon: 'none' })
				return
			}
			
			if (getApp().globalData.isOffline) {
				uni.showToast({ title: '当前为离线模式，无法进行云同步', icon: 'none' })
				return
			}

			try {
				this.isSyncing = true
				uni.showLoading({ title: '同步中...' })
				
				const exportData = await this.prepareExportData()
				
				// 模拟云同步API调用
				const syncResult = await this.cloudSyncAPI(exportData)
				
				if (syncResult.success) {
					const now = new Date().toLocaleString()
					uni.setStorageSync('last_sync_time', now)
					this.lastSyncTime = now
					
					uni.hideLoading()
					uni.showToast({ title: '同步成功', icon: 'success' })
				} else {
					uni.hideLoading()
					uni.showToast({ title: syncResult.message || '同步失败', icon: 'none' })
				}
			} catch (error) {
				uni.hideLoading()
				console.error('云同步失败:', error)
				uni.showToast({ title: '同步失败', icon: 'none' })
			} finally {
				this.isSyncing = false
			}
		},
		
		// 模拟云同步API
		cloudSyncAPI(data) {
			return new Promise((resolve) => {
				setTimeout(() => {
					// 模拟同步操作
					resolve({
						success: true,
						message: '同步成功'
					})
				}, 1500)
			})
		},
		
		// 从云端导入
		async importFromCloud() {
			if (!this.isCloudLoggedIn) {
				uni.showToast({ title: '请先登录云账号', icon: 'none' })
				return
			}
			
			if (getApp().globalData.isOffline) {
				uni.showToast({ title: '当前为离线模式，无法从云端导入', icon: 'none' })
				return
			}

			try {
				uni.showLoading({ title: '获取云端数据...' })
				
				// 模拟从云端获取数据
				const cloudData = await this.cloudGetDataAPI()
				
				if (cloudData.success && cloudData.data) {
					uni.hideLoading()
					this.importData(cloudData.data)
				} else {
					uni.hideLoading()
					uni.showToast({ title: '云端无数据或获取失败', icon: 'none' })
				}
			} catch (error) {
				uni.hideLoading()
				console.error('从云端导入失败:', error)
				uni.showToast({ title: '导入失败', icon: 'none' })
			}
		},
		
		// 模拟从云端获取数据API
		cloudGetDataAPI() {
			return new Promise((resolve) => {
				setTimeout(() => {
					// 模拟云端数据
					resolve({
						success: true,
						data: {
							version: '1.0',
							exportTime: new Date().toISOString(),
							appName: '密码管理器',
							passwordCount: 0,
							isEncrypted: false,
							passwords: []
						}
					})
				}, 1000)
			})
		},
		
		// 存储系统就绪回调
		onStorageReady() {
			this.loadBackupInfo()
		},
		
		// 存储系统错误回调
		onStorageError(error) {
			console.error('存储系统错误:', error)
		},
		
		// 加载备份信息
		async loadBackupInfo() {
			try {
				const passwords = await this.$refs.storage.getAllPasswords()
				this.passwords = passwords || []
				this.passwordCount = this.passwords.length
				
				// 获取最后备份时间
				this.lastBackupTime = uni.getStorageSync('last_backup_time') || ''
				this.isEncrypted = this.$refs.storage.isEncrypted
			} catch (error) {
				console.error('加载备份信息失败:', error)
			}
		},
		
		// 导出到文件
		async exportToFile() {
			try {
				uni.showLoading({ title: '正在导出...' })
				
				const exportData = await this.prepareExportData()
				const fileName = `password_backup_${new Date().toISOString().slice(0, 10)}.json`
				
				uni.getSystemInfo({
					success: (res) => {
						if (res.platform === 'android' || res.platform === 'ios') {
							this.saveToAppFile(exportData, fileName)
						} else {
							this.downloadFile(exportData, fileName)
						}
					}
				})
				
			} catch (error) {
				uni.hideLoading()
				console.error('导出失败:', error)
				uni.showToast({ title: '导出失败', icon: 'none' })
			}
		},
		
		// 保存到App文件
		saveToAppFile(data, fileName) {
			uni.hideLoading()
			uni.showModal({
				title: '导出成功',
				content: `文件已保存为: ${fileName}`,
				showCancel: false
			})
			this.updateBackupTime()
		},
		
		// 下载文件（H5环境）
		downloadFile(data, fileName) {
			const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
			const url = URL.createObjectURL(blob)
			const link = document.createElement('a')
			link.href = url
			link.download = fileName
			link.click()
			URL.revokeObjectURL(url)
			
			uni.hideLoading()
			uni.showToast({ title: '下载成功', icon: 'success' })
			this.updateBackupTime()
		},
		
		// 发送到邮箱
		async exportToEmail() {
			uni.showToast({ title: '暂未开放', icon: 'error' })
			return;
			try {
				uni.showLoading({ title: '准备分享...' })
				
				const exportData = await this.prepareExportData()
				const dataString = JSON.stringify(exportData, null, 2)
				
				uni.share({
					provider: 'email',
					scene: 'WXSceneSession',
					type: 0,
					summary: '密码管理器备份文件',
					success: () => {
						uni.hideLoading()
						uni.showToast({ title: '分享成功', icon: 'success' })
						this.updateBackupTime()
					},
					fail: () => {
						console.log('分享失败')
						uni.setClipboardData({
							data: dataString,
							success: () => {
								uni.hideLoading()
								uni.showModal({
									title: '备份数据已复制',
									content: '分享失败，数据已复制到剪贴板，请手动发送邮件。',
									showCancel: false
								})
								this.updateBackupTime()
							},
							fail: () => {
								uni.hideLoading()
								uni.showToast({ title: '操作失败', icon: 'none' })
							}
						})
					}
				})
				
			} catch (error) {
				uni.hideLoading()
				console.error('分享失败:', error)
				uni.showToast({ title: '分享失败', icon: 'none' })
			}
		},
		
		// 复制到剪贴板
		async exportToClipboard() {
			try {
				uni.showLoading({ title: '正在复制...' })
				
				const exportData = await this.prepareExportData()
				const dataString = JSON.stringify(exportData, null, 2)
				
				uni.setClipboardData({
					data: dataString,
					success: () => {
						uni.hideLoading()
						uni.showToast({ title: '已复制到剪贴板', icon: 'success' })
						this.updateBackupTime()
					},
					fail: (error) => {
						uni.hideLoading()
						console.error('复制失败:', error)
						uni.showToast({ title: '复制失败', icon: 'none' })
					}
				})
				
			} catch (error) {
				uni.hideLoading()
				console.error('剪贴板导出失败:', error)
				uni.showToast({ title: '导出失败', icon: 'none' })
			}
		},
		
		// 从文件导入
		importFromFile() {
			uni.chooseFile({
				count: 1,
				type: 'file',
				extension: ['.json'],
				success: (res) => {
					const filePath = res.tempFilePaths[0]
					this.readAndImportFile(filePath)
				},
				fail: (error) => {
					console.error('选择文件失败:', error)
					uni.showToast({ title: '选择文件失败', icon: 'none' })
				}
			})
		},
		
		// 读取并导入文件
		readAndImportFile(filePath) {
			uni.getFileSystemManager().readFile({
				filePath: filePath,
				encoding: 'utf8',
				success: (res) => {
					try {
						const importData = JSON.parse(res.data)
						this.importData(importData)
					} catch (error) {
						console.error('解析文件失败:', error)
						uni.showToast({ title: '文件格式错误', icon: 'none' })
					}
				},
				fail: (error) => {
					console.error('读取文件失败:', error)
					uni.showToast({ title: '读取文件失败', icon: 'none' })
				}
			})
		},
		
		// 从剪贴板导入
		importFromClipboard() {
			uni.getClipboardData({
				success: (res) => {
					try {
						const importData = JSON.parse(res.data)
						this.importData(importData)
					} catch (error) {
						console.error('解析剪贴板数据失败:', error)
						uni.showToast({ title: '数据格式错误', icon: 'none' })
					}
				},
				fail: (error) => {
					console.error('获取剪贴板失败:', error)
					uni.showToast({ title: '获取剪贴板失败', icon: 'none' })
				}
			})
		},
		
		// 导入数据
		async importData(importData) {
			try {
				uni.showLoading({ title: '正在导入...' })
				
				if (!importData.passwords || !Array.isArray(importData.passwords)) {
					throw new Error('数据格式错误')
				}
				
				uni.showModal({
					title: '确认导入',
					content: `将导入 ${importData.passwords.length} 个密码，这会覆盖现有数据。确定继续吗？`,
					success: async (res) => {
						if (res.confirm) {
							await this.$refs.storage.importData(importData)
							uni.hideLoading()
							uni.showToast({ title: '导入成功', icon: 'success' })
							this.loadBackupInfo()
						} else {
							uni.hideLoading()
						}
					}
				})
				
			} catch (error) {
				uni.hideLoading()
				console.error('导入失败:', error)
				uni.showToast({ title: '导入失败: ' + error.message, icon: 'none' })
			}
		},
		
		// 准备导出数据
		async prepareExportData() {
			const exportData = {
				version: '1.0',
				exportTime: new Date().toISOString(),
				appName: '密码管理器',
				passwordCount: this.passwordCount,
				isEncrypted: this.isEncrypted,
				passwords: this.passwords
			}
			
			return exportData
		},
		
		// 更新备份时间
		updateBackupTime() {
			const now = new Date().toLocaleString()
			uni.setStorageSync('last_backup_time', now)
			this.lastBackupTime = now
		},

		checkNetwork() {
			uni.getNetworkType({
				success: (res) => {
					this.globalData.isOffline = (res.networkType === 'none')
				}
			})
		},
		
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	display: block;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
	display: block;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

/* 云备份区域 */
.cloud-section {
	margin-bottom: 40rpx;
}

.cloud-status {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.cloud-login, .cloud-sync {
	display: flex;
	align-items: center;
}

.cloud-icon {
	font-size: 48rpx;
	margin-right: 20rpx;
}

.cloud-info {
	flex: 1;
}

.cloud-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	display: block;
}

.cloud-desc {
	font-size: 24rpx;
	color: #666;
	margin-top: 5rpx;
	display: block;
}

.login-btn {
	background: #007aff;
	color: #fff;
	border: none;
	border-radius: 8rpx;
	padding: 15rpx 30rpx;
	font-size: 26rpx;
}

.sync-actions {
	display: flex;
	gap: 15rpx;
}

.sync-btn, .logout-btn {
	border: none;
	border-radius: 8rpx;
	padding: 15rpx 25rpx;
	font-size: 26rpx;
}

.sync-btn {
	background: #34c759;
	color: #fff;
}

.sync-btn:disabled {
	background: #ccc;
}

.logout-btn {
	background: #ff3b30;
	color: #fff;
}

/* 备份选项 */
.backup-section {
	margin-bottom: 40rpx;
}

.backup-options {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.option-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.option-icon {
	font-size: 48rpx;
	margin-right: 20rpx;
}

.option-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	display: block;
}

.option-desc {
	font-size: 24rpx;
	color: #666;
	margin-top: 5rpx;
	display: block;
}

/* 导入选项 */
.import-section {
	margin-bottom: 40rpx;
}

.import-options {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

/* 数据统计 */
.stats-section {
	margin-bottom: 40rpx;
}

.stats-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.stat-item:last-child {
	border-bottom: none;
}

.stat-label {
	font-size: 26rpx;
	color: #666;
}

.stat-value {
	font-size: 26rpx;
	font-weight: 500;
	color: #333;
}

/* 安全提示 */
.security-tips {
	margin-bottom: 40rpx;
}

.tips-list {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.tip-item {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.tip-item:last-child {
	border-bottom: none;
}

.tip-icon {
	font-size: 28rpx;
	margin-right: 15rpx;
}

.tip-text {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

/* 弹窗样式 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 40rpx;
}

.modal {
	background: #fff;
	border-radius: 20rpx;
	width: 100%;
	max-width: 600rpx;
	overflow: hidden;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 30rpx 20rpx;
	border-bottom: 1rpx solid #eee;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.modal-close {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
}

.modal-body {
	padding: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 12rpx;
	display: block;
	font-weight: 500;
}

.form-input {
	width: 100%;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	background: #fff;
}

.modal-footer {
	display: flex;
	padding: 20rpx 30rpx 30rpx;
	border-top: 1rpx solid #eee;
}

.btn-cancel, .btn-login {
	flex: 1;
	height: 80rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
	margin: 0 10rpx;
	border: none;
}

.btn-cancel {
	background: #f5f5f5;
	color: #666;
}

.btn-login {
	background: #007aff;
	color: #fff;
}

.offline-banner {
	background: #fffae6;
	color: #d48806;
	text-align: center;
	padding: 10rpx 0;
	font-size: 26rpx;
}

/* 添加离线提示样式 */
.offline-notice {
	background: #fffae6;
	border: 1rpx solid #ffd666;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
}

.notice-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.notice-text {
	font-size: 26rpx;
	color: #d48806;
}
</style> 